<template>
    <div class="platform-page page">
        <div class="content">
            <div class="platform-crumb display-flex-row align-items-center">
                <div class="crumb-item">
                    <span>用户列表（{{total}}）</span>
                    <el-select v-model="type" size="mini" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="crumb-item display-flex-row align-items-center">
                    <span>快速查询</span>
                    <el-input v-model="key" placeholder="请输入手机号或姓名" size="mini"></el-input>
                </div>
                <div class="button-wrap">
                    <el-button type="primary" class="organ-red" size="mini" @click="searchUser">查询</el-button>
                    <el-button type="primary" @click="golisting" class="organ-red" size="mini">机构审核列表</el-button>
                    <el-button type="primary" @click="gonewlist" class="organ-red" size="mini">新闻资讯</el-button>
                    <el-button type="primary" @click="gobusinessAffairsEdit" class="organ-red" size="mini">商务合作
                    </el-button>
                    <el-button type="primary" @click="godict" class="organ-red" size="mini">字典管理
                    </el-button>
                </div>
            </div>
            <div class="table">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                >
                    <el-table-column align="center" label="序号" type="index" width="120">
                        <!--                        <template slot-scope="scope">-->
                        <!--                            {{ scope.row.date }}-->
                        <!--                        </template>-->
                    </el-table-column>
                    <el-table-column align="left" prop="name" label="用户名" width="120">
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img
                                    :src="scope.row.pic|filtersImg"
                                    alt
                                    style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"
                            >
                            {{ scope.row.nikename }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="角色" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.type| filterstype(options)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="mechanismName" label="所属机构"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column width="160" align="center" prop="loginTime" label="最后登陆时间"
                                     show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.loginTime|filterdata}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="sum" label="累计消费" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="opera" label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row.type,scope.row.statusId)" type="text" size="small">
                                查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination

                            @current-change="handleCurrentChange"
                            background :page-size="pageSize" layout="total, prev, pager, next"
                            :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getUserList} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import {formatDate} from '@/utils/utils'

    export default {
        data() {
            return {
                search: '',
                options: [
                    {
                        value: 1,
                        label: "教练"
                    },
                    {
                        value: 2,
                        label: "球员账号"
                    },
                    {
                        value: 3,
                        label: "机构"
                    }
                ],
                value: "",
                list: [],
                multipleSelection: [],
                type: 3,
                pageSize: 10,
                pageNum: 1,
                key: '',
                total: 0,
            };
        },
        created() {
            this.searchUser()
        },
        methods: {
            // 判断进入详情
            handleClick(type, id) {
                if (type == 1) {
                    this.gocoachdetail(id)
                } else if (type == 2) {
                    this.goqyDetail(id)
                } else {
                    this.goinstitutionsdetail(id)
                }
            },
            // 进入新闻
            gonewlist() {
                var that = this;
                that.$router.push({
                    path: '/platform/news/list',
                })
            },
            // 进入字典
            godict() {
                var that = this;
                that.$router.push({
                    path: '/platform/dict',
                })
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val
                this.searchUser()
            },
            // 教练员1
            gocoachdetail(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/coachdetail',
                    query: {
                        id: e
                    }
                })
            },
            // 球员2
            goqyDetail(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/qyDetail',
                    query: {
                        id: e
                    }
                })
            },
            // 编辑商务合作
            gobusinessAffairsEdit() {
                var that = this;
                that.$router.push({
                    path: '/platform/businessAffairsEdit',
                })
            },
            // 机构3
            goinstitutionsdetail(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/institutionsdetail',
                    query: {
                        id: e
                    }
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.pageNum = val
                this.searchUser()
            },

            golisting() {
                var that = this;
                that.$router.push({
                    path: '/platform/listing',
                })
            },
            searchUser() {
                getUserList({
                    "key": this.key,
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                    "type": this.type
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            }
        },
        filters: {
            filtersImg: function (img) {
                return baseImgPath + img
            },
            filterstype: function (e, data) {
                console.log(e, data);
                for (var i = 0; i < data.length; i++) {
                    if (e == data[i].value) {
                        return data[i].label
                    }
                }
            },
            filterdata: function (e) {
                console.log(e);
                var date = e;
                var timestamp = new Date(date).getTime();
                return formatDate(timestamp, 'Y-M-D H:I:S')
            }
        }

    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .platform-crumb {
        height: 58px;
        background-color: #fff;
        margin: 10px 0 8px;
        padding: 0 20px;

        .crumb-item {
            margin-right: 20px;

            > span {
                display: inline-block;
                min-width: 90px;
            }
        }
    }
</style>
